<template>
  <div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
        margin-top: 5px;
      "
    >
      分析结果
    </div>
    <div style="margin-top: 5px">
      <div
        style="
          display: flex;
          justify-content: space-around;
          width: 120px;
          font-size: 15px;
        "
      >
        <div>所在道路：</div>
        <div>{{ calResultData.lineNum }}条</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-around;
          width: 120px;
          font-size: 15px;
        "
      >
        <div>影响阀门：</div>
        <div>{{ calResultData.lineimpactValveNum }}个</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-around;
          width: 215px;
          font-size: 15px;
        "
      >
        <div>影响用户：</div>
        <div>{{ calResultData.impactUser }}户</div>
        <el-link type="primary" @click="showUserDetail">用户详情信息</el-link>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-around;
          width: 158px;
          font-size: 15px;
        "
      >
        <div>影响范围：</div>
        <div>暂无范围</div>
      </div>
    </div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
        margin-top: 5px;
      "
    >
      影响阀门——详细信息
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @row-click="handlePointListClick"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="keywords"
          label="关键字"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div class="popup" ref="popup" style="pointer-events: none">
      <InfoPop
        ref="popInfo"
        v-show="isInfoPopShow"
        :dialogVisible="isInfoPopShow"
        @update:dialogVisible="isInfoPopShow = $event"
      ></InfoPop>
    </div>
    <el-dialog
      :modal="false"
      title="用户详细信息"
      :visible.sync="userDetailVisible"
      class="userDetailDialog"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          flex-wrap: wrap;
        "
      >
        <div style="width: 680px; display: flex; justify-content: space-around">
          <div>
            压力类型
            <el-select
              style="margin-left: 7px; width: 8rem !important"
              size="small"
              multiple
              placeholder="全部"
            >
              <el-option>测试1</el-option>
              <el-option>测试2</el-option>
              <el-option>测试3</el-option>
            </el-select>
          </div>
          <div class="top_show">
            户名
            <el-input
              style="margin-left: 7px; width: 150px"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="top_show">
            地址
            <el-input
              style="margin-left: 7px; width: 150px"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>

        <div style="width: 300px; display: flex; justify-content: flex-end">
          <div class="top_show">
            添加户号
            <el-input
              style="margin-left: 7px; margin-right: 7px; width: 150px"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div>
            <el-button size="small" type="primary" plain>添加</el-button>
          </div>
        </div>
      </div>
      <div style="height: 200px; overflow: auto">
        <el-table
          border
          :data="tableData"
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column type="selection" width="85"></el-table-column>
          <el-table-column label="序号" width="160"></el-table-column>
          <el-table-column
            prop="name"
            label="户号"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="户名"
            width="160"
          ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column
            prop="name"
            label="口径"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="压力级别"
            width="160"
          ></el-table-column>
        </el-table>
      </div>
      <div>
        <div style="margin-top: 10px">
          停水编号：
          <el-input
            style="margin-left: 40px; width: 85%"
            size="small"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          停水标题：
          <el-input
            style="margin-left: 40px; width: 85%"
            size="small"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水原因：</span>
          <el-input
            style="margin-left: 40px; width: 85%"
            size="small"
            type="textarea"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          实施地点：
          <el-input
            style="margin-left: 40px; width: 85%"
            size="small"
          ></el-input>
        </div>
        <div
          style="
            margin-top: 10px;
            width: 85%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="width: 500px">
            <span style="margin-right: 40px">停水类型：</span>
            <el-radio label="1">计划性停水</el-radio>
            <el-radio label="2">临时停水</el-radio>
          </div>
          <div>
            口径：
            <el-input style="width: 150px" size="small"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水时间：</span>
          <el-date-picker
            style="margin-left: 40px"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">实际操作时间：</span>
          <el-date-picker
            style="margin-left: 11px"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水区域：</span>
          <el-input
            style="margin-left: 40px; width: 85%"
            size="small"
            type="textarea"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水备注：</span>
          <el-input
            style="margin-left: 40px; width: 85%"
            size="small"
            type="textarea"
          ></el-input>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-button type="primary" size="small" plain>推送OA</el-button>
        <el-button style="margin-left: 15px" type="primary" size="small" plain>
          直接推送微信
        </el-button>
        <el-button style="margin-left: 15px" type="primary" size="small" plain>
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Overlay from "ol/Overlay";
import InfoPop from "../../MapTool/InfoPop.vue";
export default {
  components: {
    InfoPop,
  },
  data() {
    return {
      tableData: [],
      userDetailVisible: false,
      calResultData: {
        lineNum: 0,
        lineimpactValveNum: 0,
        impactUser: 0,
        impactArea: "",
      },
      map: null,
      popup: null,
      isInfoPopShow: false,
    };
  },
  computed: {
    impactValveList() {
      return this.$store.state.impactValveList;
    },
  },
  mounted() {
    this.map = this.$store.getters.Map;
    if (this.popup == null) {
      let elPopup = this.$refs.popup;
      this.popup = new Overlay({
        element: elPopup,
        position: null,
        offset: [0, -10],
        positioning: "bottom-center",
      });
      this.map.map.addOverlay(this.popup);
    }
  },
  watch: {
    impactValveList(val) {
      this.tableData = val;
      // console.log("impactValveList", val);
      if (val.length > 0) {
        this.calResultData.lineimpactValveNum = val.length;
        let roadNames = new Set();
        val.forEach((item) => roadNames.add(item.roadName));
        this.calResultData.lineNum = roadNames.size;
      } else {
        this.tableData = [];
        this.calResultData = {
          lineNum: 0,
          lineimpactValveNum: 0,
          impactUser: 0,
          impactArea: "",
        };
      }
    },
  },
  methods: {
    handlePointListClick(row) {
      this.isInfoPopShow = false;
      console.log(row, "row");
      if (row.xcoordinate && row.ycoordinate) {
        let data = {
          rec: Object.keys(row).map((key) => ({
            fldname: key,
            fldtype: "",
            fldval: row[key],
          })),
        };
        console.log(data, "data");

        this.$store.commit("setDetailDataPopList", data);
        if (this.popup) {
          //弹窗赋值
          let coordinatePoint = [
            row.xcoordinate.replace(/\s+/g, ""),
            row.ycoordinate.replace(/\s+/g, ""),
          ];
          this.popup.setPosition(coordinatePoint);
          this.map.panTo(coordinatePoint);
          this.isInfoPopShow = true;
        }
      }
    },
    showUserDetail() {
      this.userDetailVisible = true;
    },
  },
  destroyed() {
    this.isInfoPopShow = false;
    if (this.map) {
      this.map.map.removeOverlay(this.popup);
    }
  },
};
</script>
<style lang="scss" scoped>
.top_show {
  display: flex;
  justify-content: space-between;
}
::v-deep.el-radio {
  color: white;
}
::v-deep .el-select {
  width: 6rem;
}
::-webkit-scrollbar {
  display: none;
}
.userDetailDialog {
  // background-color: #FFF;
  width: 45rem;
  height: 48rem;
  left: 27%;
  top: 9%;
  // overflow: hidden;
  ::v-deep .el-dialog__wrapper {
    width: 33rem !important;
  }
  ::v-deep .el-dialog {
    // width: 70%;
    background-color: #285383;
    color: #fff;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__body {
      color: #fff;
    }
  }
}
</style>
